<!DOCTYPE html>
<html>

<head>
  <style>
    .box-lab {
      width: 300px;
      height: 200px;
      padding: 20px;
      border: 5px solid #e67e22;
      margin: 30px;
      background: #f1c40f;
      transition: all 0.3s;
    }

    .controls {
      position: fixed;
      top: 20px;
      right: 20px;
      background: white;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <div class="box-lab" id="demoBox">调整参数实时查看效果</div>

  <div class="controls">
    <label>Width: <input type="range" id="width" min="100" max="500" value="300"></label>
    <label>Padding: <input type="range" id="padding" min="0" max="50" value="20"></label>
    <label>Border: <input type="range" id="border" min="0" max="20" value="5"></label>
    <button onclick="toggleBoxSizing()">切换盒模型</button>
  </div>

  <script>
    const updateStyle = () => {
      const box = document.getElementById('demoBox');
      box.style.width = document.getElementById('width').value + 'px';
      box.style.padding = document.getElementById('padding').value + 'px';
      box.style.borderWidth = document.getElementById('border').value + 'px';
    };

    const toggleBoxSizing = () => {
      const box = document.getElementById('demoBox');
      box.style.boxSizing = box.style.boxSizing === 'border-box' ? 'content-box' : 'border-box';
    };

    document.querySelectorAll('input').forEach(input =>
      input.addEventListener('input', updateStyle));
  </script>
</body>

</html>